<script>
        
    $('#link').submit(function(e){
        e.preventDefault();
        var name = document.getElementById("name").value;
        var webaddress = document.getElementById("webaddress").value;
        var header = document.getElementById("header").value;
        var category = document.getElementById("category").value;
        var description = document.getElementById("description").value;
//        alert(webaddress)
        var r = confirm("Do you confirm to add this link?");
        if(r == true){
            var url = baseurl + "admin/submitLink";
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    'name': name,
                    'link': webaddress,
                    'category': category,
                    'header': header,
                    'description': description
                },
                success: function(data){
                    if(data){
                        alert("Link has been successfully added!");
                        var page = baseurl + 'admin/showLinks';
                        $.get(page)
                        .success(function(data) {
                            $('div#content').html(data);
                        });
                        return false;
                    }
                }
            })
        }
    });
</script>
<h4>Links</h4>
<hr>
<form method="post" action="?" id="link">
    <fieldset>
        <table class="dataTable">
            <tr>
                <td>Name:</td>
                <td class="field"><input class="text input" placeholder="name" required="true" type="text" id="name" name="name" maxlength="40" value="" /></td>
            </tr>
            <tr>
                <td>Link:</td>
                <td class="field"><input class="text input" placeholder="URL link" required="true" type="text" id="webaddress" name="webaddress" maxlength="127" value="" /></td>
            </tr>
            <tr>
                <td>Header:</td>
                <td class="field"><input class="text input" placeholder="header" required="header" type="text" id ="header" name="header" maxlength="40" value="" /></td>
            </tr>
            <tr>
                <td>Category:</td>
                <td class="field">
                    <div class="picker">
                        <select class="field" name="category" id="category">
                            <option value="academic">Academic</option>
                            <option value="industry">Industry</option>               
                        </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td>Description:</td>
                <td class="field"><textarea class="input textarea" required="true" placeholder="description" id="description" name="description" row="4"></textarea></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td class="medium default  btn" style="float: right; margin-right: 10px; border-radius: 4px;" ><input type="submit" value="Submit"/></td>
            </tr>
        </table>
    </fieldset>
</form>
<script type="text/javascript">
    $(document).ready(function()
    {
        $('#links').dataTable({
            "bStateSave": true,
            "bAutoWidth" : false,
            "aLengthMenu": [[-1, 5, 10, 25, 50], ["All", 5, 10, 25, 50]],
            "iDisplayLength": 5,
            "aoColumns": [
                {"bSortable": false, "sWidth": "5%"} ,
                { "sWidth": "20%" },
                { "sWidth": "15%" },
                { "sWidth": "10%" },
                { "sWidth": "10%" },
                { "sWidth": "40%" },
                {"bSortable": false, "sWidth": "5%"} ,
                {"bSortable": false, "sWidth": "5%"} ,
                //                    {"bSortable": false} ,
                //                    {"bSortable": false}
            ]
        });
            
    });
    
    function updateLink(id, name, link, header, type, description){
        var name = document.getElementById(name).innerHTML;
        var link = document.getElementById(link).innerHTML;
        var header = document.getElementById(header).innerHTML;
        var type = document.getElementById(type).value;
        var description = document.getElementById(description).innerHTML;
        if(!confirm("Do you confirm to update?")){
            return false;
        }
        //        alert(id + ' ' + name + ' ' + link + ' ' + header + " " + type + ' ' + description);
        var success = baseurl + "admin/updateLink?id=" + id + "&name=" + name
            + "&link=" + link + "&header="+ header + "&type=" + type + "&description=" + description;
        $.get(success).success(function(data) {  
            if(data == "success"){
                alert("Successfully updated!");
            } else {
                alert("No change made");
                return false;
            }
            var page = baseurl + 'admin/showLinks';
            $.get(page)
            .success(function(data) {
                $('div#content').html(data);
            });
        });
    }
    
    function deleteLink(id){
        var r = confirm("Do you confirm to delete this link?");
        if(r){
            var success = "admin/deleteLink?id=" + id;
            $.get(success)
            .success(function(data) {  
                //                alert(data)
                var page = baseurl + 'admin/showLinks';
                $.get(page)
                .success(function(data) {
                    $('div#content').html(data);
                });
            });
        }
        return false;
    }
    
    function deleteSelectedLink(){
        var checkboxes = document.getElementsByName('links');
        if($("input.checkbox:checked").length == 0){
            alert("No link is selected!");
            return false;
        }
            
        var r=confirm("Are you sure to delete selected links?");
        if (r==true)
        {
            for(var i=0, n=checkboxes.length;i<n;i++) {
                if(checkboxes[i].checked){
                    var id = checkboxes[i].value;
                    var success = "admin/deleteLink?id=" + id;
                    $.get(success)
                    .success(function(data) {  
                        var page = baseurl + 'admin/showLinks';
                        $.get(page)
                        .success(function(data) {
                            $('div#content').html(data);
                        });
                    });
                }
            }
        }
        return false;
    }
</script>
</head>
<?php if (isset($data) && count($data)) {
    ?>
    <table id="links" class="dataTable" style="font-size: 13px">
        <thead style="background: rgb(228, 228, 228);">
        <th><input type='checkbox' onClick="selectAllByName(this, 'links')" style=""></th>
        <th>Name</th>
        <th>Link</th>
        <th>Header</th>
        <th>Category</th>
        <th>Description</th>
        <th></th>
        <th></th>
    </thead>
    <tbody>
        <?php
        foreach ($data as $link) {
            $id = $link['id'];
            $name_id = "name" . $id;
            $link_id = "link" . $id;
            $header_id = "header" . $id;
            $category_id = "category" . $id;
            $descritption_id = "description" . $id;
            echo "<tr>";
            echo "<td>";
            echo "<input type='checkbox' name='links' class='checkbox' value='$id'>";
            echo "</td>";
            echo "<td contenteditable='true' id='$name_id'>";
            echo $link['name'];
            echo "</td>";
            echo "<td><textarea id='$link_id'>";
            echo "" . $link['link'] . "";
            echo "</textarea></td>";
            echo "<td contenteditable='true'id='$header_id'>";
            echo $link['header'];
            echo "</td>";
            echo "<td><select id='$category_id'>";
            if ($link['type'] == 'Academic') {
                echo "<option value='Academic' SELECTED>Academic</option>";
                echo "<option value='Industry'>Industry</option>";
            } else {
                echo "<option value='Industry' SELECTED>Industry</option>";
                echo "<option value='Academic'>Academic</option>";
            }
            echo "</select></td>";
            echo "<td contenteditable='true' id='$descritption_id'>";
            $content = $link['description'];
            $content = htmlspecialchars($content);
            $content = str_replace("\n", "<br>", $content);
            echo $content;
            echo "</td>";
            echo "<td><a href='javascript:void(0);' onclick='updateLink($id, \"$name_id\",\"$link_id\",\"$header_id\",\"$category_id\",\"$descritption_id\")'>Update</a></td>";
            echo "<td><a href='javascript:void(0);' onclick='deleteLink($id)'>Delete</a></td>";
            echo "</tr>";
        }
        echo '</tbody></table>';
        ?>
    <br>
    <div class="medium warning  btn"><input type="submit" value="Delete" onclick="deleteSelectedLink()"/></div>
        <?php
    } else {
        echo "No feedback.";
    }
    ?>
</tbody>
</table>
